<template>
  <div class="card">
    <div class="swiper">
      <!-- <div class="swiperItem" v-for="banner in home.categoryList" :key="banner.id">
        <img src="../../../../assets/mao.jpeg" alt="">
      </div> -->
      <van-swipe class="swiperItem" :autoplay="3000" indicator-color="white" lazy-render>
        <van-swipe-item v-for="banner in home.currentCategoryInfo.bannerList" :key="banner.id">
          <img :src="banner.picUrl" alt="">
        </van-swipe-item>
      </van-swipe>

    </div>
    <div class="container">
      <div class="scrollList" v-for="catego in home.categoryItemListInfo" :key="catego.id">
        <div class="title">{{catego.category.name}}</div>
        <div class="text">{{catego.category.frontName}}</div>
        <div class="content">
          <div class="contentItem" v-for="c2 in catego.itemList" :key="c2.id">
            <img :src="c2.scenePicUrl" alt="">
            <span class="desc">{{c2.name}}</span>
            <div class="price">￥{{c2.retailPrice}}</div>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
export default {
  name: 'Card'
};
</script>
<script setup lang="ts">
import { useHomeStore } from '../../../../store/home';
import { onMounted, watch, ref, computed, toRefs } from 'vue';
const home = useHomeStore();
const obj = defineProps(['currentId']);
const id = Number(obj.currentId);
// const { categoryItemListInfo } = toRefs(home);

// const category = computed(() => home);
// // const category = computed(()=>home)
// // console.log(home)
// console.log('category', categoryItemListInfo.value);
// const banner = computed(()=>home.currentCategoryInfo)

onMounted(() => {
  home.getCatvInfo(id);
});
</script>

<style lang="scss" scoped>
.card {
  .swiper {
    .swiperItem {
      // width: 100%;
      img {
        width: 100%;
        height: 150px;
      }
    }
  }
  .container {
    .scrollList {
      .title {
        font-size: 16px;
        text-align: center;
      }
      .text {
        font-size: 12px;
        color: #cccccc;
        text-align: center;
      }
      .content {
        display: flex;
        flex-wrap: wrap;
        .contentItem {
          width: 172.5px;
          margin-left: 10px;
          margin-top: 10px;

          img {
            width: 172.5px;
            height: 172.5px;
            border-radius: 5px;
          }
          .desc {
            // width: 172.5px;
            font-size: 14px;
          }
          .price {
            font-size: 16px;
            color: red;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>